<template>
<div class="header">
  <van-nav-bar
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
>
  <template #right>
    <van-icon name="share-o" size="20px"/>
  </template>
</van-nav-bar>
<van-share-sheet
  v-model:show="showShare"
  title="立即分享给好友"
  :options="options"
  @select="onSelect"
/>
</div>
 <div class="mainWrap">
   <div class="title">
    {{title}}
    <div class="total">
      {{total}}
    </div>
   </div>
   <div class="newAni" v-for="newAni in newList" :key="newAni.title" @click="toWatchNewAni(newAni.link)">
     <div class="left">
       <img :src="newAni.cover" alt="">
       <div class="badge" :class="{badge1: newAni.badge.length == 4 , badge2: newAni.badge.length == 2}">
          {{newAni.badge}}
        </div>
     </div>
     <div class="right">
       <div class="aniTitle">{{newAni.title}}</div>
       <div class="type">{{newAni.styles}}</div>
       <div class="actors">{{newAni.actors}}</div>
       <div class="subtitle"><van-icon name="guide-o" color="#aaa" size="25px"/> &nbsp; {{newAni.subtitle}}</div>
     </div>
   </div>
 </div>
</template>

<script setup>
import { ref } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import { getNewAni } from '@/api'

    const total = ref(String)
    const title = ref(String)
    const newList = ref([])
    const showShare = ref(false)
    const options = [
      [
        { name: '微信', icon: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
      ],
      [
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
        { name: '小程序码', icon: 'weapp-qrcode' },
      ],
    ];

    const onClickLeft = () => history.back();
    const onClickRight = () => {
      showShare.value = true
    };
    //选中分享方式
    const onSelect = () => {
      // console.log(option.name);
      showShare.value = false;
    };
    onMounted(() => {
      getNewAni().then(res => {
        // console.log(res.result);
        total.value = res.result.total
        title.value = res.result.title
        newList.value = res.result.seasons
      })
    })
    //详情
    const toWatchNewAni = (href) => {
      //  window.location.href = href
       window.open(href, '_blank');
    }
</script>

<style scoped>
*{
  background-color: black;
  color: #fff;
}
.mainWrap {
  margin: 0;
  padding: 0;
  background-color: black;
  height: 100%;
  width: 100%;
}
.title{
  color: #fff;
  font-size: 20px;
  padding: 20px;
}
.total{
  color: #aaa;
  font-size: 14px;
}
.newAni{
  display: flex;
  padding: 10px 10px;
  height: 200px;
}
.left img{
  width: 140px;
  height: 200px;
  border-radius: 5px;
}
.right{
  padding-left: 10px;
}
.aniTitle{
  font-size: 18px;
}
.type, .subtitle, .actors{
  color: #aaa;
  font-size: 14px;
  margin-top: 8px;
}
.actors{
  height: 40px;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: wrap;
}
.subtitle{
  margin-top: 18px;
}
.badge1{
position: relative;
margin-top: -200px;
margin-left: 70px;
width: 65px;
background-color: rgb(228, 22, 108);
}
.badge2{
position: relative;
margin-top: -200px;
margin-left: 100px;
width: 35px;
background-color: rgb(30, 137, 236);
}
</style>